<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			<!-- 添加 -->
			<template v-if="type=='add'">
				<view class="body">
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">项目经理</view>
							<view class="form-picker" >
								<view class="picker">
									<view class="select-data t-r f-grey">{{params.principal_name}}</view> 
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</view > 						
						</view> 
						<view class="form-item">
							<view class="label">负责人</view>
							<view class="form-picker" >
								<view class="picker">
									<view class="select-data t-r f-grey">{{params.duty_name}}</view> 
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</view > 						
						</view>  
					</view>
					<view class="form-wrap m-b2">
						<view class="form-textarea-item">
							<view class="label a-t">任务描述</view>
							<view class="form-textarea">
								<textarea class="inp-textarea" v-model="params.task_name" placeholder="阶段描述" maxlength="-1"></textarea>
							</view>
						</view> 
					</view>	
					<view class="form-wrap m-b2"> 
						<view class="form-item">
							<view class="label">编号</view>
							<view class="form-input">
								<view class="content">
									<input type="text" class="inp" disabled :value="params.task_num?params.task_num:'自动生成'" placeholder="输入阶段名称" />							</view>				
							</view>			
						</view> 
						<view class="form-item">
							<view class="label">优先级</view>
							<picker class="form-picker" mode="selector" :range="level" range-key="name" @change="changeLevel">
								<view class="picker">
									<view class="select-data t-r">{{params.priority_name}}</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
					</view>
					
					
					<view class="form-wrap m-b2">		 
						<view class="form-item">
							<view class="label">开始时间</view>
							<picker class="form-picker" mode="date" @change="selectDate(1,$event)">
								<view class="picker">
									<view v-if="params.start_time" class="select-data t-r">{{params.start_time}}</view>
									<view v-else class="select-data t-r f-grey">选择开始时间</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						<view class="form-item">
							<view class="label">结束时间</view>
							<picker class="form-picker" mode="date" @change="selectDate(2,$event)">
								<view class="picker"> 
									<view v-if="params.end_time" class="select-data t-r">{{params.end_time}}</view>
									<view v-else class="select-data t-r f-grey">选择结束时间</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 									
					</view>
								
					<view class="form-wrap m-b2">
						<view class="form-textarea-item">
							<view class="label a-t">任务进展</view>
							<view class="form-textarea">
								<textarea class="inp-textarea" auto-focus v-model="params.desc" placeholder="任务进展" maxlength="-1"></textarea>
							</view>
						</view> 
					</view>
					
					<!-- <view class="m-b2">
						<c-uploadFile type='6'
						 :files="params.files" :pro_id="pro_id" :task_id="id"></c-uploadFile>
					</view> -->
					
					<!-- <view class="form-wrap m-b2">
						<view class="form-upload-item">
							<view class="hd" @click="showPopup('show','isChoseFile')">
								<view class="label a-t"><text class="iconfont">&#xe62f;</text>上传附件</view>
								<view class="iconfont f-s48">&#xe635;</view> 
							</view>
							<view v-if="params.files.length>0" class="file-list">
								<view class="file-item" v-for="(item,index) in params.files" :key="index">
									<view class="icon">
										<image v-if="$checkFileType(item.file_name)==3" src="@/static/images/pdf.png" mode="widthFix"></image>
										<image v-if="$checkFileType(item.file_name)==1" src="@/static/images/word.png" mode="widthFix"></image>
										<image v-if="$checkFileType(item.file_name)==2" src="@/static/images/excel.png" mode="widthFix"></image>
										<image v-if="$checkFileType(item.file_name)==4" src="@/static/images/image.png" mode="widthFix"></image> 
									</view>
									<view class="name-area">	
										<view class="name split">{{item.file_name}}</view>
										<view class="size">{{item.create_time}}</view>
									</view>
									<view class="iconfont del-icon f-s36">&#xe8b6;</view>
								</view> 
							</view>
						</view> 
					</view>
					 -->
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">任务状态</view>
							<picker class="form-picker" mode="selector" :range="taskState" range-key="name" @change="changeState">
								<view class="picker">
									<view class="select-data t-r">{{params.status_name}}</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view>
					</view>
								
				</view>
				<view class="footer">
					<view class="fix-wrap created-btn-wrap">
						<view class="btn submit-btn" @click="addTask">添加</view> 
					</view>
				</view> 
			</template>
			
			<!-- 编辑 -->
			<template v-if="type=='edit'">
				<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
				<template v-else>				
					<view  class="body">
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">项目经理</view>
								<view class="form-picker" >
									<view class="picker">
										<view class="select-data t-r f-grey">{{params.principal_name}}</view> 
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</view > 						
							</view> 
							<view class="form-item">
								<view class="label">负责人</view>
								<view class="form-picker" >
									<view class="picker">
										<view class="select-data t-r f-grey">{{params.duty_name}}</view> 
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</view > 						
							</view>  
						</view>
						
						<view class="form-wrap m-b2">
							<view class="form-textarea-item">
								<view class="label a-t">任务描述</view>
								<view class="form-textarea">
									<textarea class="inp-textarea" v-model="params.task_name" placeholder="任务描述" maxlength="-1"></textarea>
								</view>
							</view> 
						</view>					
						
						<view class="form-wrap m-b2"> 
							<view class="form-item">
								<view class="label">编号</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp f-grey" disabled :value="params.task_num?params.task_num:'自动生成'" placeholder="输入阶段名称" />							</view>				
								</view>			
							</view> 
							<view class="form-item">
								<view class="label">优先级</view>
								<picker class="form-picker" mode="selector" :range="level" range-key="name" @change="changeLevel">
									<view class="picker">
										<view class="select-data t-r">{{params.priority_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
						</view>
						
						
						<view class="form-wrap m-b2">		 
							<view class="form-item">
								<view class="label">开始时间</view>
								<picker class="form-picker" mode="date" @change="selectDate(1,$event)">
									<view class="picker">
										<view v-if="params.start_time" class="select-data t-r">{{params.start_time}}</view>
										<view v-else class="select-data t-r f-grey">选择开始时间</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
							<view class="form-item">
								<view class="label">结束时间</view>
								<picker class="form-picker" mode="date" @change="selectDate(2,$event)">
									<view class="picker"> 
										<view v-if="params.end_time" class="select-data t-r">{{params.end_time}}</view>
										<view v-else class="select-data t-r f-grey">选择结束时间</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 											
						</view>
									
						<view class="form-wrap m-b2">
							<view class="form-textarea-item">
								<view class="label a-t">任务进展</view>
								<view class="form-textarea">
									<textarea class="inp-textarea" v-model="params.desc" placeholder="任务进展" maxlength="-1"></textarea>
								</view>
							</view> 
						</view>
						
						<view class="m-b2">
							<c-uploadFile type='6'
							 :files="params.files" :pro_id="pro_id" :task_id="id"></c-uploadFile>
						</view>						 
						
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">任务状态</view>
								<picker class="form-picker" mode="selector" :range="taskState" :value="statusValue" range-key="name" @change="changeState">
									<view class="picker">
										<view class="select-data t-r">{{params.status_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>						
									</view>	
								</picker> 						
							</view> 
						</view>			
					</view>
					<view class="footer">
						<view class="fix-wrap created-btn-wrap">
							<view class="btn submit-btn" @click="editTask">保存</view> 
						</view>
					</view> 
				</template>
			</template>
			 
		
		</template>
		 
	</view>
</template>

<script>
 
	export default {
		data() {
			return { 
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				pro_id:'',
				id:'',
				type:'add',
				level:[],
				taskState:[],
				params:{ 
					task_name:'', 
					task_num:'',
					priority:'',
					priority_name:'',
					status:'',
					status_name:'',
					start_time:'',
					end_time:'',
					principal:'',
					principal_name:'',   // 负责人
					duty:'',
					duty_name:'',    // 项目经理
					desc:'', 
					files:[]
				},  
				flag:{		// 弹窗相关
					isFullPage:false,  
					isChoseFile:false					 
				}, 
				isStop:true,
				loadingState:{
					default:true
				},
				statusValue:''
			}
		},
		onLoad(params) {   
			this.isLogin=this.$loginState('check');  
			this.pro_id=params.pro_id;			
			this.type=params.type;
			this.params.duty_name=params.director_name;
			this.params.duty=params.director;
			this.params.principal_name=params.responsible_name;
			this.params.principal=params.responsible;
			
			this.level=this.$mock_data.level;
			this.params.priority=this.level[0].id;
			this.params.priority_name=this.level[0].name;
			
			this.taskState=this.$mock_data.taskState;
			this.params.status=this.taskState[0].id;
			this.params.status_name=this.taskState[0].name;
			if(this.type=='add'){				 
				uni.setNavigationBarTitle({
					title:'添加任务'
				})
			} 
			if(this.type=='edit'){
				this.id=params.id;
				if(params.files){
					let files=JSON.parse(params.files);
					files.forEach(item=>{
						if(item.type==6&&item.task_id==this.id){
							this.params.files.push(item);
						}
					})
				}
				uni.setNavigationBarTitle({
					title:'任务详情'
				})
				if(this.isLogin){
					this.getTaskInfo();
				}
			} 
		}, 
		methods: {
			
			// 选择优先级
			changeLevel(e){ 
				this.params.priority=this.level[e.target.value].id;
				this.params.priority_name=this.level[e.target.value].name;
			},
			
			// 选择阶段状态
			changeState(e){
				this.params.status=this.taskState[e.target.value].id;
				this.params.status_name=this.taskState[e.target.value].name;
			},
			
			// 选择开始/结束时间 
			selectDate(type,e){
				// type 1 开始时间 2 结束时间 
				if(type==1){
					this.params.start_time=e.target.value;
				}
				if(type==2){
					this.params.end_time=e.target.value;
				}				
			},
			
			// 获取任务详情
			async getTaskInfo(){
				let res=await this.$api.project_api.getTaskInfo({
					id:this.id
				})   
				console.log(res)
				if(res.data.code==200){ 
					this.loadingState.default=false;
					this.params.task_num=res.data.data.task_num;
					this.params.task_name=res.data.data.task_name; 
					this.params.priority=res.data.data.priority;
					this.level.forEach(item=>{
						if(item.id==res.data.data.priority){
							this.params.priority_name=item.name;
						}
					})					
					this.params.status=res.data.data.status;
					this.taskState.forEach(item=>{
						if(res.data.data.status==3||res.data.data.status==4){
							this.statusValue=2;
							 this.params.status_name=item.name;
						}
						if(item.id==res.data.data.status){
							this.params.status_name=item.name;
						}
					})	 
					this.params.start_time=res.data.data.start_time;
					this.params.end_time=res.data.data.end_time; 
					this.params.desc=res.data.data.desc;  
				}
			},
			
			// 添加任务
			async addTask() {
				let {task_name,priority,status,start_time,end_time,principal,desc,duty}=this.params; 
				
				if (task_name == '') {
					this.$showToast({
						title:'请输入阶段名称'
					})
					return
				}  
				
				if (duty == '') {
					this.$showToast({
						title:'请选择任务负责人'
					})
					return
				} 
				
				if (start_time == '') {
					this.$showToast({
						title:'请选择开始时间'
					})
					return
				} 
				
				if (end_time == '') {
					this.$showToast({
						title:'请选择结束时间'
					})
					return
				} 
							
				if(this.isStop){
					this.isStop=false;
					let res = await this.$api.task_api.addTask({
						project_id:this.pro_id, 
						task_name,
						priority,
						status,
						start_time,
						end_time,
						principal,
						duty,
						desc, 
					});
					if (res.data.code == 200) {
						this.$showToast({
							icon:'success',
							title:'添加成功',
							duration:1000,
						}).then(()=>{
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
								this.$store.commit('TASK_LIST_UPDATE',1);   // 更新任务列表
							},1000)
							
						}) 
					} else {
						this.$showToast({
							icon:'error',
							title:res.data.msg
						}) 
					} 
				}
				
			},
			
			// 编辑任务
			async editTask() {
				let {task_name,priority,status,start_time,end_time,principal,desc,duty}=this.params; 
				if (task_name == '') {
					this.$showToast({
						title:'请输入阶段名称'
					})
					return
				}  
				
				if (duty == '') {
					this.$showToast({
						title:'请选择任务负责人'
					})
					return
				} 
				
				if (start_time == '') {
					this.$showToast({
						title:'请选择开始时间'
					})
					return
				} 
				
				if (end_time == '') {
					this.$showToast({
						title:'请选择结束时间'
					})
					return
				} 
				
				if(this.isStop){
					this.isStop=false;
					let res = await this.$api.task_api.editTask({
						id:this.id,
						project_id:this.pro_id, 
						task_name,
						priority,
						status:status==1?3:status,
						start_time,
						end_time,
						principal,
						duty,
						desc, 
					});  
					if (res.data.code == 200) {
						this.$showToast({
							icon:'success',
							title:'编辑成功',
							duration:1000,
						}).then(()=>{
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
								this.$store.commit('TASK_LIST_UPDATE',1);   // 更新任务列表
							},1000)
							
						})
					} else {
						this.$showToast({
							icon:'error',
							title:res.data.msg
						}) 
					}
				}
				
			},
			
			async sendMsg() {
				if (!this.params.approver.id) {
					this.$showToast({
						title: '请选择审核人',
						duration: 1000,
					})
					return
				}
			
				if (this.isStop) {
					this.isStop = false;
					let res = await this.$api.user_api.addApprover({
						content: this.userInfo.username + '创建了新项目，请领导审核',
						approver: this.params.approver.id,
						carbon_copy: this.params.carbon_copy_id.join('_'),
						pro_id: this.id,
						content_type: '0',
						title: this.userInfo.username + '创建的项目'
					});
					if (res.data.code == 200) {
						this.$showToast({
							icon: 'success',
							title: '发送成功',
							duration: 1000,
						}).then(async () => {
							let update_status = await this.$api.project_api.updateProjectStatus({
								id: this.id,
								status: '1',
								content: '发送给老板审核'
							})
							if (update_status.data.code == 200) {
								this.$store.commit('PROJECT_LIST_UPDATE', 1);
							}
			
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/project/project'
								})
							}, 1000)
						})
						this.isStop = true;
					} else {
						this.isStop = true;
						this.$showToast({
							icon: 'error',
							title: res.data.msg,
							duration: 1000,
						})
					}
				}
			},
			 
			
		},
		
		computed: {
			// 负责人
			// fzr_user() {
			// 	return this.$store.state.duty_state;
			// } 
		},
		watch: { 
		
			// 监听负责人更新
			// fzr_user(newer, older) {					
			// 	if (newer.id) {  
			// 		this.params.duty = newer.id;
			// 		this.params.duty_name = newer.username;
			// 	}  
			// } 
		},
	}
</script>

<style lang="less" scoped>
	 
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	 
</style>
